<template>
	<view :style="themeColor" style="overflow-x: hidden;">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center shoppingCart_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub shoppingCart_fd0_0'>
					<view class='flex flex-wrap align-center shoppingCart_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  shoppingCart_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='shoppingCart_fd0_0_c1_c0'>购物车</text>
					</view>
					<view class='flex flex-wrap align-center justify-end shoppingCart_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="flex flex-wrap align-center benben-position-layout flex shoppingCart_flex_1" :style="{top:(88+StatusBarRpx)+'rpx', }" v-if="carData.length > 0">
				<text class='shoppingCart_fd1_0 big_tap_area' @click="isEditor=!isEditor">管理</text>

			</view>
			<view v-if="carData.length > 0" :style="{height: '88rpx'}"></view>

			<fu-empty v-if="carLoading"></fu-empty>
			<view v-else>
				<benben-shop-cart :cartList="carData" :isEditor.sync="isEditor" class='shoppingCart_flex_cart_2'
					:cart-num.sync="cartNum" :sku-id.sync="skuId" :cart-id.sync="cartId" :cart-ids.sync="cartDsIds"
					:goods-id.sync="goodId" @numberChange="numberChange" @delCart="delCart" @changeSku="changeSku"
					@createOrder="toBuy">
					<template #login>
						<view class='flex flex-direction flex-wrap align-center' style="padding-bottom: 80rpx;background: #fff;">
							<image class='shoppingCart_shopCart0_0_c0' mode="aspectFill" :src='STATIC_URL+"no.png"'></image>
							<text class='shoppingCart_shopCart0_0_c1'>您还没登录，快去登录吧</text>
							<button class='shoppingCart_shopCart0_0_c2'
								style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;">去登录</button>
						</view>
					</template>
					<template #empty>
						<view class='flex flex-direction flex-wrap align-center' style="padding-bottom: 80rpx;background: #fff;">
							<image class='shoppingCart_shopCart0_0_c0' mode="aspectFill" :src='STATIC_URL+"no.png"'></image>
							<text class='shoppingCart_shopCart0_0_c1'>您的购物车还没有商品，快去挑选吧</text>
							<button class='shoppingCart_shopCart0_0_c2' @tap.stop="handleJumpDiy" data-type="switchTab"
								data-url="/pages/tabBar/mallPage/mallPage">去挑选好货</button>
						</view>
					</template>
				</benben-shop-cart>
			</view>
			<!---flex布局flex布局开始-->
			<view v-if="showGood" class="flex flex-direction flex-wrap align-stretch benben-flex-layout shoppingCart_flex_3">
				<div class="mtt">
					<view class="icon">
						<image :src='STATIC_URL+"724.png"'></image>
					</view>
					<text class="tt_ctn">猜你喜欢</text>
					<view class="icon">
						<image :src='STATIC_URL+"725.png"'></image>
					</view>
				</div>

				<view class='flex flex-wrap align-center justify-between flex-sub'
					style="padding: 32rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));">
					<Good v-for="(item, index) in goodList" :key="index" :item="item" />

					<view style="width: 100%;text-align: center;">
						<fu-empty v-if="goodListLoading"></fu-empty>
						<fu-empty-ui v-else-if="goodListEmpty"></fu-empty-ui>
					</view>
				</view>
			</view>
			<!---flex布局flex布局结束-->
		</view>

		<benben-popup v-model="popupShow1653961165769" :mask="true" mode='bottom'>
			<!---规格弹窗flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout commoDity_flex_6">
				<view class='flex flex-direction flex-wrap align-stretch commoDity_fd6_0'>
					<view class='flex flex-wrap align-center commoDity_fd6_0_c0'>
						<image class='commoDity_fd6_0_c0_c0' mode="aspectFill" :src='classification.sku_img'></image>
						<view class='flex flex-wrap align-center flex-sub'>
							<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
								<view class='flex flex-wrap align-center'
									style="margin-bottom: 16rpx;">
									<text class='commoDity_fd6_0_c0_c1_c0_c0_c0_1'>￥</text>
									<text class='commoDity_fd6_0_c0_c1_c0_c0_c0'>{{classification.shop_price}}</text>
								</view>
								<view
									style="display: flex;color: #999;">
									<view class='flex flex-wrap align-center commoDity_fd6_0_c0_c1_c0_c1'>
										<text class='commoDity_fd6_0_c0_c1_c0_c1_c0'>库存：</text>
										<text class='commoDity_fd6_0_c0_c1_c0_c1_c1'>{{classification.stock}}</text>
									</view>
									<view class='flex flex-wrap align-center' style="margin-left: 40rpx;">
										<text class='commoDity_fd6_0_c0_c1_c0_c2_c0'>已选择：</text>
										<text
											class='commoDity_fd6_0_c0_c1_c0_c2_c1'>{{classification.spec_item_name}}</text>
									</view>
								</view>
							</view>
							<view class="close-box">
								<text class="cuIcon-close" @tap="popupShow1653961165769=false"></text>
							</view>
						</view>
					</view>
					<view class='flex flex-direction flex-wrap align-stretch commoDity_fd6_0_c1'
						v-for="(v, k) in goodData.goods_spec" :key="k">
						<text class='commoDity_fd6_0_c1_c0'
							style="font-family: Source Han Sans CN, Source Han Sans CN;">{{v.name}}</text>
						<view>
							<view class='flex align-center justify-center flex commoDity_fd6_0_c1_c1_c1'
								:class="item.isSelect ? 'is_select' : ''" v-for='(item,key) in v.child' :key="key">
								<text style="font-family: Source Han Sans CN, Source Han Sans CN;"
									class="commoDity_fd6_0_c1_c1_c1_c0" @tap="selectSpec(k, key)">{{item.item}}</text>
							</view>
						</view>
					</view>
					<view class='flex  align-start commoDity_fd6_0_c3'>
						<text class='commoDity_fd6_0_c3_c0'
							style="font-family: Source Han Sans CN, Source Han Sans CN;">购买数量</text>

						<view class="flex align-center justify-center" style="flex-direction: column;">
							<uni-number-box v-if="goodData.max_buy_num" v-model="buyNum" :min="1" :step="1"
								:max="goodData.max_buy_num"></uni-number-box>
							<uni-number-box v-else :min="1" :step="1" v-model="buyNum"></uni-number-box>
							<view v-if="goodData.max_buy_num-0"
								style="padding: 24rpx;margin:0 0 0 auto;width:max-content;color:#62889B;font-family: Source Han Sans CN, Source Han Sans CN;">
								此商品限购{{goodData.max_buy_num}}件</view>
						</view>
					</view>

					<view style="height: 12rpx;"></view>
					<button style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;"
						:loading="changeSkuLoading" class='commoDity_fd6_0_c4' @click="confirmSkuFn">确认选择</button>
				</view>
			</view>
			<!---规格弹窗flex布局结束-->
		</benben-popup>
	</view>
</template>
<script>
	import Good from '@/pages/tabBar/mallPage/Good.vue'
	export default {
		components: {
			Good
		},
		data() {
			return {
				carData: [],
				goodList: [],
				goodListPage: 1,
				goodListTotal: 0,
				goodListAfresh: false,
				goodListLoading: true,
				goodListEmpty: false,
				goodListRequestStart: false, // 请求开始
				goodListResetTimer: null,
				showGood: false,
				isEditor: false,
				carLoading: true,
				// 编辑
				cartNum: "",
				skuId: "",
				cartId: "",
				cartDsIds: "",
				goodId: "",
				popupShow1653961165769: false,
				goodData: {},
				classification: {},
				buyNum: 1,
				changeSkuLoading: false,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		onPullDownRefresh() {
			this.resetgoodList();
		},
		onReachBottom() {
			this.goodListLoading && this.getgoodList();
		},
		onLoad() {
			this.getData();
			uni.$on("UPDATE_CAR_DATA", () => {
				this.getData();
				uni.pageScrollTo({
					scrollTop: 0
				});
			});
		},
		onUnload() {
			uni.$off("UPDATE_CAR_DATA");
		},
		methods: {
			/** 去购买 */
			toBuy() {
				if (!this.cartDsIds) return;
				const target = this.cartDsIds.split(",");
				const result = target.map(id => {
					const _info = this.carData.find(item => item.id == id);
					return {
						'cart_id': id,
						'goods_id': _info.goods_id,
						'num': _info.num,
						'sku_id': _info.sku_id,
					}
				});
				uni.setStorageSync("CONFIRM_GOOD_INFO", {
					goods_info: result
				});
				uni.navigateTo({
					url: "/pages/grzx/cartBilling/cartBilling"
				});
			},
			/** 确认sku */
			async confirmSkuFn() {
				if (this.changeSkuLoading) return;
				this.changeSkuLoading = true;
				try {
					const query = {
						cart_id: this.cartId,
						goods_id: this.goodId,
						sku_id: this.goodData.sku_id,
						num: this.buyNum,
					};
					const res = await this.$post('6551c691d1327', query);
					this.getData();
					this.$msg(res.msg || "成功");
				} catch (e) {
					this.$msg((e || {}).msg || "失败")
				}
				this.popupShow1653961165769 = false;
				this.changeSkuLoading = false;
			},
			/** 显示改变规格 */
			changeSku() {
				const _info = {
					...this.carData.find(item => item.id == this.cartId)
				};
				this.classification = _info.goods_sku.find(item => item.spec_item_id == _info.spec_item_id);
				this.goodData = _info;
				this.buyNum = _info.num;
				this.popupShow1653961165769 = true;
			},
			/** 选择规格 */
			selectSpec(k, key) {
				this.goodData.goods_spec[k].child.forEach((v, k) => {
					v.isSelect = false;
				})
				this.goodData.goods_spec[k].child[key].isSelect = true;
				this.$forceUpdate();
				let specs = '';
				this.goodData.goods_spec.forEach((v, k) => {
					if (v.child.length > 0) {
						v.child.forEach((v1, k1) => {
							if (v1.isSelect) {
								specs += v.child[k1].id + '_';
							}
						})
					}
				})
				specs = specs.substring(0, specs.length - 1);
				const _info = this.goodData.goods_sku.find(item => item.spec_item_id == specs);
				this.goodData.sku_id = _info.sku_id;
			},
			/** 删除商品 */
			async delCart() {
				try {
					const res = await this.$post('6551c6bdce9c0', {
						cart_ids: this.cartDsIds
					});
					this.$msg(res.msg || "成功");
					this.getData();
				} catch (e) {
					console.debug(e, 'e')
					this.$msg((e || {}).msg || "失败")
				}
			},
			/** 改变数量 */
			async numberChange() {
				await this.$post("6551c6a9a8918", {
					cart_id: this.cartId,
					num: this.cartNum,
					goods_id: this.carData.find(item => item.id == this.cartId).goods_id
				});
				this.getData();
			},
			/** 获取数据 */
			async getData() {
				try {
					const res = await this.$post('6551c67b47914', {
						page: 1,
						list_rows: 1000
					});
					this.carData = (res.data.data || []).map(item => {
						return {
							...item,
							aid: item.id,
							is_valid: 0,
							sku_name: item.spec_item_name
						}
					});
				} catch (e) {
					this.$msg((e || {}).msg || "失败")
				}
				this.carLoading = false;
				if (this.showGood = !this.carData.length) this.resetgoodList();
			},
			/** 重新获取商品列表 */
			resetgoodList() {
				this.goodListAfresh = true;
				this.goodListLoading = true;
				this.goodListEmpty = false;
				this.goodListRequestStart = false;
				clearTimeout(this.goodListResetTimer);
				this.goodListResetTimer = setTimeout(() => this.getgoodList(), 300);
			},
			/** 获取商品列表执行 */
			async getgoodList() {
				if (this.goodListRequestStart) return;
				this.goodListRequestStart = true;
				if (this.goodListAfresh) this.goodListPage = 1;
				try {
					var res = await this.$post('6551c70c429f4', {
						page: this.goodListPage,
						list_rows: 10,
						// 其他参数
					});
					const _goodList = (res.data.data || []).map((t, i) => {
						return {
							...t,
							animationTime: i / 10 + 0.25
						}
					})
					if (this.goodListAfresh) this.goodList = _goodList;
					else this.goodList = this.goodList.concat(_goodList);
					this.goodListPage++;
					this.goodListTotal = res.data.total;
					this.goodListLoading = this.goodList.length < this.goodListTotal;
				} catch (e) {
					this.goodListLoading = false;
				}
				this.goodListAfresh = false;
				uni.stopPullDownRefresh();
				this.goodListRequestStart = false;
				this.goodListEmpty = !this.goodList.length && !this.goodListLoading;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.shoppingCart_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
		background-color: #ffffff;
	}

	.shoppingCart_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 400;
		color: #333;
		line-height: 88rpx;
	}

	.shoppingCart_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.shoppingCart_fd0_0_c0 {
		width: 120rpx;
	}

	.shoppingCart_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.shoppingCart_flex_1 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 88rpx;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		background-size: 100% auto;
		background: #F5F5F5;
	}

	.shoppingCart_fd1_0 {
		color: #333;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 0rpx 32rpx;
	}

	.shoppingCart_shopCart0_0_c2 {
		background: #F35D2A;
		border-radius: 50rpx;
		width: 480rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.shoppingCart_shopCart0_0_c1 {
		font-size: 28rpx;
		color: #666;
		margin: 0rpx 0rpx 40rpx 0rpx;
	}

	.shoppingCart_shopCart0_0_c0 {
		width: 440rpx;
		height: 240rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 88rpx;
	}

	.shoppingCart_flex_cart_2 {
		--nav-btn-bg: linear-gradient(126deg, #fa2033 0%, #ff6530 100%);
		--checked-active: #ff0000;
		--del-btn-color: #ffffff;
		--del-btn-bg: #343434;
		--submit-btn-bg: linear-gradient(126deg, #fa2033 0%, #ff6530 100%);
	}

	.shoppingCart_flex_3 {
		margin-top: 20rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
		.mtt {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 68rpx;

			.icon {
				width: 108rpx;
				height: 28rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.tt_ctn {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				margin: 0 18rpx;
			}
		}
	}

	.commoDity_flex_6 {
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 100rpx 0rpx 0rpx 0rpx;
	}


	.commoDity_fd6_0 {
		background: #fff;
		background-size: 100% !important;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		max-height: 1000rpx;
	}

	.commoDity_fd6_0_c0 {
		margin: 30rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c0_c0 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: -70rpx 24rpx 0rpx 0rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #AD3823;
		margin: 0rpx 8rpx 0rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c0_1 {
		font-size: 20rpx;
		font-weight: 700;
		color: #AD3823;
		margin: 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c0_c1 {
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		line-height: 28rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c1 {
		margin: 0rpx 0rpx 8rpx 0rpx;
		transform: translateY(4rpx);
	}

	.commoDity_fd6_0_c0_c1_c0_c1_c0 {
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c1_c1 {
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c0 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c1 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c0_c2_c2 {
		word-wrap: break-word;
		font-size: 24rpx;
	}

	.commoDity_fd6_0_c0_c1_c1 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.commoDity_fd6_0_c1 {
		margin: 32rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c1_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 24rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c1_c1_c0 {
		border: 1px solid #AD3823;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c1_c1_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: #AD3823;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c1_c1_c1 {
		border: 1px solid #F8F8F8;
		background: #F8F8F8;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		float: left;
	}

	.is_select {
		border: 1px solid #F35D2A;
		background: #FFF0ED;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
		float: left;
		color: #F35D2A !important;
	}

	.commoDity_fd6_0_c1_c1_c1_c0 {
		font-size: 28rpx;
		font-weight: 400;
		// color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2 {
		margin: 24rpx 32rpx 0rpx 32rpx;
	}

	.commoDity_fd6_0_c2_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 0rpx 0rpx 24rpx 0rpx;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2_c1_c0 {
		border: 1px solid #AD3823;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c2_c1_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
		color: #AD3823;
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c2_c1_c1 {
		border: 1px solid #BFBFBF;
		background: #FFFFFF;
		background-size: 100% !important;
		width: 144rpx;
		height: 64rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.commoDity_fd6_0_c2_c1_c1_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	.commoDity_fd6_0_c3 {
		margin: 30rpx 32rpx 30rpx 32rpx;
	}

	.commoDity_fd6_0_c3_c0 {
		margin: 0rpx auto 0rpx 0rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		word-wrap: break-word;
	}

	::v-deep .commoDity_numberBoxInputfd6_0_c3_c1 {
		border: 1px solid #DCDCDC;
		background: #fff;
		background-size: 100% !important;
		width: 74rpx;
		height: 50rpx;
		text-align: center;
		color: #323232;
		font-size: 28rpx;
	}

	.commoDity_fd6_0_c3_c1_c0 {
		height: 50rpx;
		width: 52rpx;
		transform: translateY(5rpx);
	}

	.commoDity_fd6_0_c3_c1_c2 {
		height: 50rpx;
		width: 52rpx;
		transform: translateY(5rpx);
	}

	.commoDity_fd6_0_c4 {
		background: #F35D2A;
		background-size: 100% !important;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 500;
		margin: 0 32rpx 32rpx;
	}

	.close-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0 0 auto 0;
	}
</style>